<template>
  <div class="blank-layout">
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'BlankLayout',
  data () {
    return {
      transitionName: 'left'
    }
  },
  watch: {
    $route (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      if (toDepth === fromDepth) {
        const { sort: toMetaSort } = to.meta
        const { sort: fromMetaSort } = from.meta
        if (toMetaSort && fromMetaSort) {
          this.transitionName = toMetaSort < fromMetaSort ? 'down' : 'up'
        }
      } else {
        this.transitionName = toDepth < fromDepth ? 'right' : 'left'
      }
    }
  }
}
</script>

<style lang="less">
.blank-layout {
  position: relative;

  & > div {
    padding: 24px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
.left-enter-active,
.left-leave-active {
  transition: all 1000ms ease-in-out;
}
.left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.left-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.left-leave {
  transform: translateX(0);
  opacity: 1;
}
.left-leave-to {
  transform: translateX(-100%);
  opacity: 0.4;
}

.right-enter-active,
.right-leave-active {
  transition: all 1000ms ease-in-out;
}
.right-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.right-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.right-leave {
  transform: translateX(0);
  opacity: 1;
}
.right-leave-to {
  transform: translateX(100%);
  opacity: 0.4;
}

.down-enter-active,
.down-leave-active {
  transition: all 1000ms ease-in-out;
}
.down-enter {
  transform: translateY(-100%);
  opacity: 0;
}
.down-enter-to {
  transform: translateY(0);
  opacity: 1;
}

.down-leave {
  transform: translateY(0);
  opacity: 1;
}
.down-leave-to {
  transform: translateY(100%);
  opacity: 0.1;
}

.up-enter-active,
.up-leave-active {
  transition: all 1000ms ease-in-out;
}
.up-enter {
  transform: translateY(100%);
  opacity: 0;
}
.up-enter-to {
  transform: translateY(0);
  opacity: 1;
}

.up-leave {
  transform: translateY(0);
  opacity: 1;
}
.up-leave-to {
  transform: translateY(-100%);
  opacity: 0.1;
}
</style>
